控制器增加页面统一提示组件

背景

目前控制器的无序列号的提示五花八门，样式未进行统一处理，代码实现方式也是各写各的。所以这里做统一处理，方便维护。

实现

通过观察，发现几乎所有页面都是继承自SFX.page.AbstractPage，所以在这个父类中增加序列号的判断逻辑。

layout : function(){
	/* *** */
	this.setPageTip();
},

通过以前实现的序列号判断方法SF.isModuleHasOprAuth，获取是否有页面权限，无权限时往当前页面添加弹窗组件SFX.tips.PageTip。

/**
 * 设置页面的提示，支持顶部横幅和整个页面遮罩两种效果，默认取sn信息去显示
 */
setPageTip: function () {
    var me = this;
    // 判断是否有sn权限
    var noSn = !SF.isModuleHasOprAuth(this.initialConfig.moduleName);
    // 页面自定义
    var pageTipConfig = SF.merge(
        (this.getPageTipConfig && this.getPageTipConfig()) || {},
        SFX.tips.PageTip.prototype.getDefaultOptions()
    );
    // 没权限，统一加提示语组件
    // isTabRootPage 只在tab的根AbstractPage加，存在页面里套了AbstractPage的页面，不做限制会显示多个出来
    if ((noSn && me.initialConfig.isTabRootPage) ||
        pageTipConfig.forceShow
    ) {
        this.container.add(
            new SFX.tips.PageTip({
                pageTipConfig: pageTipConfig,
                getTipHeightCb: function (height) {
                    // 待提示框渲染完后获得其高度，动态修改页面的高度，给提示框空出位置来
                    var containerHeight = me.container.getHeight() - height;
                    me.container.setHeight(containerHeight);
                    me.container.el.dom.style.paddingTop = height + 'px';
                    // formPanel的页面在onLayout中用了个定时器，这里也只能用定时器了
                    if (me.formPanel && me.scrollBtnToPos) {
                        setTimeout(function () {
                            me.scrollBtnToPos(containerHeight);
                        }, 0)
                    }
                }
            })
        );
    }
},

使用

弹窗有两种样式：

• 顶部提示（有警告和错误两种状态样式）
• 整体遮罩（用于通用情况）

默认

如果页面没配置自定义效果，则会使用默认样式

自定义效果

SFX.tips.PageTip提供自定义效果

默认配置如下

getDefaultOptions: function () {
    return {
        forceShow: false,       // 强制显示（默认关闭）
        type: 'mask',           // top显示在顶部，mask显示遮罩（默认）
        textAlign: 'center',    // 文字对齐方向 center（默认） left right
        status: 'warn',         // 状态样式，type=top时才生效 warn（默认） error
        html: '',               // 提示语
        actionHandler: null     // 点击回调函数
    };
},

配置方式看注释就行

说明一下：

forceShow表示强制显示，适合不是序列号控制的场景。

页面如果需要自定义，在页面内配置一份getPageTipConfig即可，格式

getPageTipConfig: function () {
    return {支持的参数可查看上面的默认配置}
}